<template>
  <div id="app">
    <!-- 直接keep-alive包裹router-view 一刀切  导致所有的组件都缓存 我们要有选择的缓存 -->
    <keep-alive>
      <router-view v-if="$route.meta.isKeepAlive" />
    </keep-alive>
    <router-view v-if="!$route.meta.isKeepAlive" />
  </div>
</template>

<script>
export default {
  name: 'App',
  created() {
    // 测试接口 正确返回数据
    // this.$http('/v1_0/channels').then(res => {
    //   console.log(res)
    // })
  }
}
</script>

<style lang="scss" scoped>
  // less定义变量语法 @baseFont: 12px;
  // scss定义变量语法 $变量名: 值;
  // scss 和less类似 之前怎么使用less, 还怎么使用scss
  //  scss less sass stylus 都是css预处理器
  // sass 和 stylus 语法样式要求不能加; 不能加 {}
  // $baseColor: pink
  // #app
  //   .btn
  //     background-color: pink
// $color: pink;
// 写样式写的是px单位, 最终页面渲染的是rem单位
// #app {
//   .btn {
//     background-color: $color;
//     width: 175px;
//     height: 100px;
//   }
// }
</style>
